<!DOCTYPE html>
<!--登录页面-->
<html lang="zh-cn" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">

    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>

    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>

    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <style>
        body{
            background-image:url("https://img.17sucai.com/upload/55/2013-05-18/884aa4be28287056c7b5d6d075382c51.jpg?x-oss-process=style/big");
            background-size: 100% 100%;
            background-repeat: no-repeat;
            padding-top: 70px;
        }
        h1
        {
            color:orange;
            text-align:center;
        }
        container{
            text-align: center;
            background-color: #888;
            border-radius: 300px;
            width: 300px;
            height: 350px;
            margin:auto;
            position: absolute;
            left: 0%;
            top: 0%;
            bottom:0%;
            right:0%;
        }

    </style>
</head>
<body>
<div class="container">
    <div class="col-md-offset-3 col-md-6" style="margin: auto">
        <div class="form-horizontal">
        <h1>注册界面</h1>
                <div class="form-group">
                    username：<input type="text" class="form-control" id="username" name="username" size="10">
                    password：<input type="password" class="form-control" id="password" name="password" size="10">
                </div>
                <div class="form-group row flex-column justify-content-center">
                    <center><button type="button" style="width:100px;height:50px;text-align: center;" class="btn btn-success" id="logon">注册</button></center>
                </div>
        </div>
</div>
</div>
</body>
</html>

<script>
    $(document).ready(
        $("#username").bind("input propertychange",function() {
            var username = $("#username").val();
            if(username.length>10){
                alert("用户名长度不允许超过10位");
            }
        }),
        $("#logon").click(function (){
            var username=$("#username").val()
            if(username.length>10 || username.length<2){
                alert("用户名长度在2-10之间");
                return
            }else {
                var password=$("#password").val()
                $.ajax({
                    url: "/logonCheck",
                    type: "POST",
                    data: {
                        "username":username,
                        "password":password
                    },
                    success: function (result) {
                        console.log(result);
                        if(result === "success"){
                            alert("注册成功")
                            window.location.href="/login"
                        }
                        else if (result==="usernameError"){
                            alert("用户名已存在")
                        }
                    },
                    error: function (jqXHR, textStatus, errorThrown) {
                        alert("错误！");
                    }
                })
            }
        })
    )


</script>